<template>
  <view>
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="订单"></van-nav-bar>
    <!-- #endif -->
    <scroll-view class="order-details flex-column" scroll-y="true" :style="orderDetailsH5">
      <!-- 订单号 -->
      <view class="order-number">订单号：{{ data.details.startChargeSeq }}</view>
      <!-- 充电信息 -->
      <view class="details-item">
        <text class="title text-bold">充电信息</text>
        <view class="top-wrap">
          <view class="item">
            <view class="text1">
              <text class="text-bg">启</text>
              {{ getVal(data.details.startSoc, '%') }}
            </view>
            <view class="text2">{{ data.details.startTimePoint || '--' }}</view>
            <view class="text3">{{ data.details.startTimeDate || '--' }}</view>
          </view>
          <view class="item">
            <view class="text4">{{ data.details.chargedTimeFZH || '--' }}</view>
            <view class="line"></view>
            <view class="text4">{{ getVal4(data.details.totalPower, '度') }}</view>
          </view>
          <view class="item">
            <view class="text1">
              <text class="text-bg">止</text>
              {{ getVal(data.details.endSoc, '%') }}
            </view>
            <view class="text2">{{ data.details.endTimePoint || '--' }}</view>
            <view class="text3">{{ data.details.endTimeDate || '--' }}</view>
          </view>
        </view>
        <view class="info">
          <view class="left flex-column">
            <text class="test">电站名称</text>
            <text class="test">终端编码</text>
            <text v-if="appType === 'lznt'" class="test">快捷码</text>
            <text class="test">充电车辆</text>
            <!-- <text class="test">开始时间</text>
          <text class="test">结束时间</text> -->
          </view>
          <view class="right flex-column">
            <text class="test">{{ data.details.stationName || '--' }}</text>
            <text class="test">{{ data.details.connectorCode || '--' }}</text>
            <text v-if="appType === 'lznt'" class="test">
              {{ data.details.shortcutCode || '--' }}
            </text>
            <text class="test">{{ data.details.plateNumber || '--' }}</text>
            <!-- <text class="test">{{ data.details.startTime || '--' }}</text>
          <text class="test">{{ data.details.endTime || '--' }}</text> -->
          </view>
        </view>
      </view>
      <!-- 充电费用 -->
      <view class="details-item">
        <text class="title text-bold">充电费用</text>
        <view class="info">
          <view class="left flex-column">
            <text class="test">电费</text>
            <text class="test">服务费</text>
            <!-- <text class="test">充电度数</text> -->
            <text class="test">订单金额</text>
          </view>
          <view class="right flex-column">
            <text class="test">
              {{ getVal4(data.details.totalElecMoney, '￥', 2) }}
            </text>
            <text class="test">
              {{ getVal4(data.details.totalServiceMoney, '￥', 2) }}
            </text>
            <!-- <text class="test">
            {{ getVal4(data.details.totalPower, '度') }}
          </text> -->
            <text class="test text-bold">
              {{ getVal4(data.details.totalAmount, '￥', 2) }}
            </text>
          </view>
        </view>
      </view>
      <!-- 优惠信息 -->
      <view class="details-item">
        <text class="title text-bold">优惠信息</text>
        <view class="info">
          <view class="left flex-column">
            <text class="test">活动优惠</text>
            <text class="test">会员权益</text>
            <text class="test">优惠券</text>
          </view>
          <view class="right flex-column">
            <text class="test text-bold">
              {{ getVal4(data.details.activitiesDiscounts, '￥', 2) }}
            </text>
            <text class="test text-bold">
              {{ getVal4(data.details.vipInterests, '￥', 2) }}
            </text>
            <text class="test text-bold">
              {{ getVal4(data.details.discountCoupon, '￥', 2) }}
            </text>
          </view>
        </view>
      </view>
      <!-- 支付信息 -->
      <view class="details-item">
        <text class="title text-bold">支付信息</text>
        <view class="info">
          <view class="left flex-column">
            <text class="test">实付</text>
            <text class="test">结算时间</text>
            <text v-if="Number(data.details.unitAmount) > 0" class="test">企业钱包</text>
            <text class="test">个人钱包</text>
          </view>
          <view class="right flex-column">
            <text class="test text-bold">
              {{ getVal2(data.details.actualAmount, '￥', 2) }}
            </text>
            <text class="test">{{ data.details.orderCloseTime }}</text>
            <text v-if="Number(data.details.unitAmount) > 0" class="test text-bold">
              {{ getVal2(data.details.unitAmount, '￥', 2) }}
            </text>
            <text class="test text-bold">
              {{ getVal2(data.details.personalAmount, '￥', 2) }}
            </text>
          </view>
        </view>
      </view>
      <view class="item-box"></view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { getHistoryOrder } from '@/service/apis/order';
import { getVal, getVal2, getVal4 } from '@/utils/util';
import { getSystemInfo, setToastInstance, systemInfo } from '@mixins/info';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const appType = import.meta.env.VITE_VUE_APP_TYPE;

const data = reactive({
  page: '',
  details: {} as any,
});

const orderDetailsH5 = computed(() => {
  // #ifdef H5
  return `height: calc(100vh - ${getSystemInfo().navHeight}px)`;
  // #endif
  return '';
});
// data.details = {
//   orderId: 'MA20CTE98758972965723456858',
//   startTime: '2020-10-10 14:18:20', // 开始充电时间
//   endTime: '2020-10-10 14:18:20', // 结束充电时间
//   pileName: '充电枪1020438101',
//   totalPower: '22.822', // 电量
//   plateNumber: '苏A3GM88', // 车牌
//   money: '50.00', // 价格
// };

onLoad((option: any) => {
  data.page = option.page || '';
  getHistoryOrder(option.id).then((res: any) => {
    data.details = res;
  });
});

onUnload(() => {
  uni.$emit('returnData', 'historyDetails');
});
// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss">
@import './details.scss';

.order-details .details-item .top-wrap {
  display: flex;
  margin: 15px 0;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .text1 {
      line-height: 22px;
      font-size: 14px;
      color: $uni-color-primary;
    }

    .text2 {
      line-height: 22px;
      font-size: 18px;
      color: #000;
    }

    .text3 {
      line-height: 22px;
      font-size: 12px;
      color: #999;
    }

    .text4 {
      line-height: 22px;
      font-size: 14px;
      color: #333;
    }

    .text-bg {
      display: inline-block;
      width: 22px;
      height: 22px;
      background-color: rgba(188, 188, 188, 0.2);
      border-radius: 11px;
      text-align: center;
    }

    .line {
      width: 100%;
      margin: 6px;
      border-bottom: 1px dashed #999;
    }
  }
}
</style>